<template>
    <div class="View">

        <div class="row">
            <div class="label">
                課名1
            </div>
            <el-select class="long-ipt" v-model="Data.SecName1" placeholder=" ">
                <el-option v-for="item in ComBox.secList" :key="item.key" :label="item.label" :value="item.label">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                課名2
            </div>
            <el-select class="long-ipt" v-model="Data.SecName2" placeholder=" ">
                <el-option v-for="item in ComBox.secList" :key="item.key" :label="item.label" :value="item.label">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                課名3
            </div>
            <el-select class="long-ipt" v-model="Data.SecName3" placeholder=" ">
                <el-option v-for="item in ComBox.secList" :key="item.key" :label="item.label" :value="item.label">
                </el-option>
            </el-select>
        </div>

        <footer class="footer-view">
            <button @click="clearFn">{{ $t("message.planView.btn.clear") }}</button>
            <button @click="saveFn">{{ $t("message.planView.btn.get") }}</button>
            <button @click="close">
                {{ $t("message.public.close") }}
            </button>
        </footer>
    </div>
</template>

<script>
import $ from "jquery";
import Tab1 from './tabs/tab1.vue'
import Tab2 from './tabs/tab2.vue'
import Tab3 from './tabs/tab3.vue'
// import { getExtCodSourceByUser, getExtCodSourceCombox, extCodSourceByUser, delCodSourceByUser, getClearMsg, getCtgSymb } from "@/api/api";
import { ExCGInspInventoryCombox, GetSecScreenDmgCodeList } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import { showLoading, hideLoading } from "@/utils/loading";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
    name: "Retrieval",
    data() {
        return {
            Data: {
                SecName1: ' ',
                SecName2: ' ',
                SecName3: ' ',
            },
            ComBox: {
                secList: []
            }
        };
    },
    props: ['styleOptionsValue'],
    components: { Tab1, Tab2, Tab3 },
    watch: {
        Data: {
            handler(newName, oldName) {
                this.$store.state.DanDang = newName;
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        async clearFn() {
            this.Data = {
                SecName1: ' ',
                SecName2: ' ',
                SecName3: ' ',
            };

            this.saveFn();
        },
        // // 清空
        async delCodSourceByUserApi() {

        },
        // 显示确认弹窗
        async showConfirmDialog() {

        },

        // 抽出
        async saveFn() {
            // 当无条件时，不执行
            this.$store.state.btn_set_BHView2 = _.isEqual(await this.getDefaultDataFn(), this.Data);
            if (this.$store.state.btn_set_BHView2) {
                eventBus.$emit('GetMachineByCustomer1_2', 'Equal');
                this.$emit('showRetrievalBtn', 2)
                return
            }
            showLoading()
            let dataJson = {
                ...this.Data,
                macType: this.$store.state.macType
            };
            let res = await GetSecScreenDmgCodeList(dataJson);

            if (res.data.code == -310) {
                eventBus.$emit('GetMachineByCustomer1_2', []);
                hideLoading();
                this.$emit('showRetrievalBtn', 2)
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            if (res.data.code != 0) {
                eventBus.$emit('GetMachineByCustomer1_2', []);
                hideLoading();
                this.$emit('showRetrievalBtn', 2)
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            eventBus.$emit('GetMachineByCustomer1_2', res.data.data);

            delete this.Data.Account;

            hideLoading();
            this.$emit('showRetrievalBtn', 2)
        },
        close() {
            this.$emit('showRetrievalBtn', 2);
        },

        // 默认数据
        getDefaultDataFn() {
            return {
                SecName1: ' ',
                SecName2: ' ',
                SecName3: ' ',
            }
        },



        // 获取下拉框的集合
        async ExCGInspInventoryComboxApi() {
            this.ComBox.secList = [];
            let res = await ExCGInspInventoryCombox({});
            this.ComBox = res.data.data;

        },



        // 第一次，
        async initFn() {
            this.ExCGInspInventoryComboxApi();
            // this.$store.state.btn_set_BHView2 = _.isEqual(await this.getDefaultDataFn(), this.Data);
        },

    },
    created() {

    },
    mounted() {
        this.initFn();

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    padding-top: 20px;
}


.row {
    width: 100%;
    display: flex;
    // justify-content: start;
    padding: 7px 0;
    align-items: center;
    padding-left: 16px;

    .label {
        // width: 145px;
        min-width: 145px;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .ipt {
        width: 380px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;

        }
    }

    .right {

        ::v-deep .el-input__inner {
            text-align: right;

        }
    }

    .long-ipt {
        width: 380px;
        height: 32px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__inner:focus {
            border: 1px solid #dcdfe6;
        }

        ::v-deep .el-input__icon {
            line-height: 32px;
            color: #909399;
        }

        ::v-deep .el-input__suffix {
            width: 32px;
            right: 0;
            background: #dee0e3;
        }
    }

    .picker {
        // width: 175px;
        height: 32px;
        // margin: 0px 10px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__suffix {
            background: transparent;
        }

        ::v-deep .el-input__icon {
            line-height: 100%;
        }
    }

}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;

    button {
        min-width: 82px;
        height: 32px;

        border: 1px solid #d9d9d9;
        margin-right: 12px;
        border-radius: 4px;
    }

    button:nth-child(2) {
        background: #106ebe;
        color: #fff;
        padding: 0 15px;
    }

    button:nth-child(3) {
        position: absolute;
        background: #eb7421;
        color: #fff;
        right: 0px;
    }
}
</style>
